<template>
	<div class="nodeWrap" :class="[showAdd ? 'add' : '']">
		<div class="nodeBox">
			<div class="title">
				<span class="icon"></span>
				<a-input
					ref="inputRef"
					:autoFocus="autoFocus"
					v-if="editStatus"
					v-model:value="nodeName"
					placeholder="请输入节点名称"
					@blur="handleBlur"
				></a-input>
				<div v-else class="showArea" @click="handleEdit">
					<span class="nodeName">{{ nodeName }}</span>
					<span class="editIcon"></span>
				</div>
			</div>
			<div class="content">
				<associate :nodeIndex="nodeIndex" :treeData="treeData" :data="data" :name="name" :id="id"></associate>
			</div>
		</div>
		<arrows class="arrowsComponent">
			<span v-if="showAdd" class="addBtn" @click="handleAdd"></span>
		</arrows>
	</div>
</template>

<script setup name="node">
import associate from '../associate/index.vue';
import arrows from '../arrows/index.vue';
import { message } from 'ant-design-vue';
import { ref, nextTick } from 'vue';
const props = defineProps(['data', 'nodeIndex', 'showAdd', 'treeData', 'name', 'id']);
const emit = defineEmits(['onAdd']);
const inputRef = ref(null);
const nodeName = ref('');
const editStatus = ref(true);
const autoFocus = ref(false);
/** */
const handleBlur = () => {
	if (nodeName.value.length) {
		props.data['nodeName'] = nodeName.value;
		editStatus.value = false;
	} else {
		if (props.data['nodeName'].length) {
			nodeName.value = props.data['nodeName'];
			editStatus.value = false;
		} else {
			props.data['nodeName'] = '';
			editStatus.value = true;
		}
	}
};
/** */
const handleEdit = () => {
	autoFocus.value = true;
	editStatus.value = true;
	nextTick(() => {
		inputRef.value.focus();
	});
};
const handleAdd = () => {
	if (!props.data['nodeName'].length) {
		message.warning('节点名称不能为空');
		return;
	}
	if (!props.data['nodeDeviceId']) {
		message.warning('摄像头名称不能为空');
		return;
	}
	emit('onAdd');
};
</script>

<style lang="less" scoped>
@boxRadius: 6px;
.nodeWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	&.add {
		.title {
			background: #86909c;
			:deep(.ant-input) {
				border-color: #a1a4a7;
				color: #fff;
				box-shadow: none;
				&::placeholder {
					color: #adb2b6;
				}
			}
		}
	}
}
.nodeBox {
	width: 308px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
	border-radius: @boxRadius;
	.title {
		height: 36px;
		display: flex;
		align-items: center;
		padding: 0 20px;
		//background: linear-gradient(173.75deg, #5b97ff 3.73%, #146aff 94.94%);
		background: #146aff;
		border-top-left-radius: @boxRadius;
		border-top-right-radius: @boxRadius;
		transition: backgroundColor 200ms ease;
		.icon {
			background-image: url(@/assets/image/nodeName.png);
			background-size: 100%;
			width: 16px;
			height: 15px;
			margin-right: 8px;
		}
		:deep(.ant-input) {
			width: 150px;
			border-color: #4591dc;
			padding: 4px;
			height: 26px;
			background-color: transparent !important;
			box-sizing: none !important;
			color: #fff;
			&::placeholder {
				color: #4591dc;
			}
		}
		.showArea {
			margin-left: 4px;
			display: flex;
			color: #fff;
			align-items: center;
			line-height: 26px;
			cursor: pointer;
			&:hover {
				.editIcon {
					display: block;
				}
			}
			.nodeName {
				max-width: 150px;
				margin-right: 10px;
			}
			.editIcon {
				display: none;
				width: 16px;
				height: 16px;
				background-image: url(@/assets/image/edit.png);
				background-size: 100%;
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 52px;
		background-color: #fff;
		padding: 0 10px;
		border-bottom-left-radius: @boxRadius;
		border-bottom-right-radius: @boxRadius;
	}
}
.arrowsComponent {
	margin-top: -4px;
}
.addBtn {
	display: block;
	width: 24px;
	height: 24px;
	background-image: url(@/assets/image/addNode.png);
	background-size: 100%;
	cursor: pointer;
}
</style>
